import { SearchBar } from 'antd-mobile';
import '../css/home.css'
import { Swiper } from 'antd-mobile'
import { Grid } from 'antd-mobile'
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import instance from '../axios';
import Map from '../component/Map';
import { Image } from '@nutui/nutui-react'
const colors = [
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.wP5voEuLjWleZVceanjtLAHaE8?w=282&h=188&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  'https://tse1-mm.cn.bing.net/th/id/OIP-C.qS8Lb2qjS521vmsM2BXyOAHaE6?w=285&h=189&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.c4__rf8aH5H-60oEf5se5gAAAA?w=253&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.iLdZbq5fpl7uGzINW61KDAHaE8?w=244&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
]
const verticalItems = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div className="verticalContent" style={{ backgroundImage: `url(${color})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}> </div>
  </Swiper.Item>
))

const background = ['red', '＃7CFC00', 'green', 'yellow', 'skyblue', 'origin', 'pink', '#ccc', 'purple', '#000']
export default function Home() {
  const placeholderImg = (
    <img
      alt=""
      width="100%"
      src="https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png"
    />
  )
  const [cateList, setCateList] = useState([])
  const [list, setList] = useState([])
  const getCateList = async () => {
    const { data: { data } } = await instance.get('/getCateList')
    let arr = [...data]
    arr = arr.slice(0, 10)
    setCateList(arr)
  }
  const getList = async () => {
    const { data: { data } } = await instance.get('/getList')
    setList(data)
  }
  useEffect(() => {
    getCateList()
    getList()
  }, [])
  const navigate = useNavigate()
  const [address, setAddress] = useState(localStorage.getItem('startAddress') || '')
  const handleAddCart = async (t) => {
    console.log(t, '加入购物车');
    navigate(`/cate/?_id=${t._id}`)
  }
  const change = (address) => {
    console.log(address, '地址');
    setAddress(address)
  }

  const handleNavigate = (id) => {
    console.log(id, 'id当前点击的分类');
    navigate(`/cateList/?id=${id}`)
  }
  return (<div>
    <div style={{ display: 'none' }}><Map change={change} /></div>
    {/* 头部 */}
    <div className='img'>
      <p>当前位置：{address}</p>
    </div>
    <div style={{ height: 'calc(100vh - 128px)', overflowY: 'scroll' }}>
      {/* 搜索框 */}
      <div className='search'>
        <SearchBar placeholder='请输入内容' />
      </div>
      {/* 轮播图*/}
      <div className='lunbo'>
        <Swiper direction='vertical' style={{ '--height': '170px' }} autoplay loop>
          {verticalItems}
        </Swiper>
      </div>
      {/* 宫格区，分类*/}
      <div className='grid'>
        <Grid columns={5} gap={8}>
          {cateList.map((t, index) => (<Grid.Item key={t._id}>
            <div className='grid-demo-item-block'>
              <p onClick={handleNavigate.bind(null, t._id)}><img src={t.img} alt="" width="40px" height="40px" style={{ backgroundColor: `${background[index]}`, borderRadius: '50%' }} /></p>
              <p>{t.name}</p>
            </div>
          </Grid.Item>))}
        </Grid>
      </div>
      {/* 商品列表*/}
      <div className='goods-list'>
        <ul className='goods-list-ul'>
          {list.map(t => (<li className='goods-list-li' key={t._id}>
            <Image src={t.img}
              lazy
              loading={placeholderImg}
              error={placeholderImg} />
            <h4>{t.name}</h4>
            <h4>提货时间：{t.time}</h4>
            <p>
              <span style={{ fontSize: '20px', color: 'red', marginRight: '10px' }}>￥{t.price}</span>
              <span>已售{t.num}件</span>
              <button
                onClick={() => handleAddCart(t)}
                style={{ float: 'right', backgroundColor: 'red', color: 'white', borderRadius: '15px', width: '100px', height: '30px', border: 'none' }}
              >加入购物车</button>
            </p>
          </li>))}
        </ul>
      </div>
    </div>
  </div>);
}